<template>
  <main>
    <header class="gold-coin-header">
      <p class="coin">{{coin}}<span class="iconfont icon-jiantou-elm"></span></p>
      <p class="base-font-size">当前金币<span class="iconfont icon-wenti"></span></p>
    </header>
    <section class="g-c-section">
      <h4 class="h4"><strong>兑换商品</strong></h4>
      <p class="small-title">好物随心换</p>
    </section>
    <div class="shop-box">
      <a class="shop-item" :href="item.url" v-for="item in limitShop" :key="item.image_hash">
        <h6 class="item-title">{{item.title}}</h6>
        <p>
          <span class="item-points_required">
            {{item.points_required}}
          </span>
          <span class="item-text">金币</span>
          <span class="item-corner_marker">
            {{item.corner_marker}}
          </span>
        </p>
        <img :src="item.image_hash" width="100%" />
      </a>
    </div>
    <footer class="g-c-footer flex-row-center" @click="$router.replace('/goldcoinshop')">
      查看更多
      <span class="iconfont icon-jiantou-elm more"></span>
    </footer>
  </main>
</template>

<script>
import { getCoin, limitData } from '@/api/elm-data'
export default {
  name: 'gold-coin',
  data() {
    return {
      coin: 0,
      limitShop: []
    }
  },
  async created() {

    const { data } = await limitData()
    const { data: coin } = await getCoin(window.sessionStorage.getItem('USER_ID'))
    this.limitShop = data
    this.coin = coin.point
    console.log(data)
  }
}
</script>

<style scoped lang="less">
  .gold-coin-header {
    padding: 20px;
    align-items: center;
    background: linear-gradient(to right, #00aaff, #0085ff);
    color: #fff;
  }
  .coin {
    margin: 0;
    height: 82px;
    font-size: 82px;
    font-weight: 600;
  }
  .icon-jiantou-elm {
    font-size: 36px;
    font-weight: 100;
    vertical-align: middle;
  }
  .icon-wenti {
    font-size: 24px;
    margin-left: 5px;
  }
  .g-c-section {
    padding: 25px;
    background-image: url('');
    border-top: 1px solid transparent;
    text-align: center;
  }
  .h4 {
    font-size: 32px;
    margin: 0;
  }
  .small-title {
    margin: 2px auto 0;
    font-size: 22px;
    color: #b5b5b5;
  }
  .shop-box {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
  }
  .shop-item {
    display: block;
    box-sizing: border-box;
    width: 50%;
    border: 1px solid #f0f0f0;
  }
  .item-title {
    font-size: 28px;
    margin: 10px 5px;
    font-weight: 400;
    color: #000;
  }
  .item-points_required {
    margin-left: 10px;
    color: #f94843;
    font-weight: 600;
  }
  .item-text {
    margin: 0 10px;
  }
  .item-corner_marker {
    padding: 0 4px;
    background-color: #f94843;
    border-radius: 5px;
    color: #fff;
  }
  .g-c-footer {
    padding: 20px;
    background-color: #fff;
    color: #aaa;
  }
  .more {
    font-size: 24px;
  }
</style>
